/*!
 * BEGIN HEADER
 *
 * Contains:        Geometry CSS
 * CVM-Role:        Theme
 * Maintainer:      Hendrik Erz
 * License:         GNU GPL v3
 *
 * Description:     This file contains the main commands and style rules for the
 *                  geometry of the app itself. It sizes and frames the elements
 *                  but does not contain any colours or other styling elements.
 *                  These are located in the theme files.
 *
 *                  The aim of the geometry is that even without any theme all
 *                  elements are positioned correctly. Colouring is the only
 *                  thing that will at that point be missing.
 *
 * END HEADER
 */

// Import the CodeMirror CSS so we can bundle it with the geometry file
@import "~codemirror/lib/codemirror.css";

// Import the necessary styles for the virtual scroller in the main window
@import "~vue-virtual-scroller/dist/vue-virtual-scroller.css";

// First import the geometry variables
@import "variables.less";

// Then the font sets
@import "../fonts.less";

// Common CSS
* {
  margin: 0;
  box-sizing: border-box;
}

html {
  // Prevent text selection cursor throughout the app (except CodeMirror)
  cursor: default;
  // The base font-size for everything (equals 1rem across the HTML)
  // This can be overridden using the root var --base-font-size
  // We have to set this HERE and NOT in the body, because rem-lengths look
  // up this element, and not the body values.
  font-size: var(--base-font-size, 16px);
}

body {
  overflow: hidden;
  user-select: none; // Prevent arbitrary selection outside of inputs

  .dragger {
    // This class is applied to dragged elements
    font-size: @font-size-small;
    border-radius: 5px;
    background-color: var(--grey-1);
    padding: 4px;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, .25);
    cursor: default;
  }

  // File manager arrow button
  #file-manager #arrow-button {
    background-color: white;
    border-radius: 100%;
    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, .25);
  }

  // Notifications
  .notify {
    background-color: rgba(0, 0, 0, .7);
    color: white;
    border-radius: 3px;
  }

  // Fixes the non-readable blue colour of the links and prevents them from
  // breaking out of the container.
  .tippy-box .tippy-content {
    a {
      color: white;
      word-wrap: break-word;
    }

    // The document tabs use the class "tag" to mark tags in the tippy preview
    .tag {
      border-radius: 5px;
      margin: 3px;
      padding: 3px;
      display: inline-block;
      background-color: #999;
    }
  }


  // The table helper injects CSS that we need to override
  .table-helper-align-button-container,
  .table-helper-remove-button-container,
  .table-helper-add-button {
    color: var(--c-primary);
    background-color: var(--grey-2); // Make it more visible
  }

  .table-helper-align-button-line {
    background-color: var(--c-primary);
  }

  .table-helper-remove-button-line {
    background-color: black;
  }

  .taglist .tagspacer:only-child .tag {
    border: 2px solid white;
  }
}

// Reset those ugly outlines
input, select, textarea, button {
  &:focus {
    outline: 0;
  }
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
}

.clearfix {
  clear: both;
}

/**
 * Now the import directives to include the geometrical preconditions for all
 * elements.
 */

// Cursor blink animation (see codemirror.less for implementation)
@import "../animation-cursor.less";
@cursor-blink-rate: 1s; // How fast should the cursor blink?

// END ANIMATIONS

@import "modal.less";

@import "file-list.less";
@import "file-tree.less";
@import "file-manager.less";

@import "editor.less";

@import "document-tabs.less";

@import "codemirror.less";

@import "toolbar.less";

@import "notify.less";

@import "popup.less";

@import "sidebar.less";

@import "inputs.less";

@import "window-controls.less";

@import "menubar.less";

@import "application-menu.less";

@import "theme-mockups.less"; // Contains the mockup designs for the theme switcher
